<template>
  <el-dialog v-model="isShowDialog" title="导出Excel数据" width="30%" :destroy-on-close="true">
    <el-form>
      <el-form-item>
        <el-input v-model="tableName" placeholder="请输入导出文件名称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShowDialog = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script setup lang="ts" >
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { formateJson } from './utils'
const props = defineProps({
  dataList: {
    type: Array,
    required: true,
  },
  excelConfig: {
    type: Object,
    required: true,
  },

})


const isShowDialog = ref(false)
const tableName = ref('')
const loading = ref(false)

// 处理导出的默认事件
const confirm = async () => {
  if (tableName.value == '') {
    ElMessage({
      message: '表名不能为空！',
      type: 'warning',
    })
  } else {
    const excel = await import('./Export2Excel')
    // 数据转格式化 变成二维数组形式
    const data = formateJson(props.excelConfig, props.dataList)
    // 生成excel 固定写法
    excel.export_json_to_excel({
      header: Object.keys(props.excelConfig),
      data,
      filename: tableName.value,
    })
    tableName.value = ""
    isShowDialog.value = false
  }
}

defineExpose({
  isShowDialog,
  tableName
})

</script>
<style lang='less' scoped>
</style>
